<template>
  <div  class="counter-warp">
    <div class="headcls">
      <ul>
        <li v-for="(xx, index) in xxs" :key="index">
          <div class="divcls" v-if=" xx.obj === '0' ">
            <img :src="xx.headImg" class="headimgcls"/>
            <div class="textarea" v-text="xx.content"></div>
          </div>
          <div class="divcls1" v-else>
            <img :src="xx.headImg" class="headimgcls1"/>
            <div class="textarea1" v-text="xx.content"></div>
          </div>
        </li>
      </ul>
    </div>

    <div id="footdiv" class="hfcls"></div>
    <div  class="fotcls">
      <img class="linecls" src="http://qiniuyun.bblog.site/yyy.png"/>
      <input class="iptcls" v-model="msg"/>

      <img class="linecls2" v-if=" msg === '' "  src="http://qiniuyun.bblog.site/jiahao11.png"/>
      <img class="linecls2" v-else  src="http://qiniuyun.bblog.site/send.png"  @click="sendMsg()"/>

      <img class="linecls2"  src="http://qiniuyun.bblog.site/biaoqing.png"/>
    </div>

    <mptoast />
  </div>
</template>

<script>
import { requestPost } from '@/utils/index'
import mptoast from 'mptoast'
export default {
  components: {
    mptoast
  },
  data () {
    return {
      xxs: [],
      openid: '',
      msg: '',
      headimg: ''
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: '聊天机器人'
    })
    this.openid = wx.getStorageSync('openid')
    this.headimg = wx.getStorageSync('headimg')
    this.xxs = [{'headImg': 'http://qiniuyun.bblog.site/robo2.png', 'content': '我已經回火星了，过几年我会再回来的，byeeeee', 'obj': '0'}]
  },
  methods: {
    sendMsg () {
      this.xxs.push({'headImg': this.headimg, 'content': this.msg, 'obj': '1'})
      wx.createSelectorQuery().select('#footdiv').boundingClientRect(function (rect) {
        wx.pageScrollTo({
          scrollTop: rect.bottom
        })
      }).exec()
      var that = this
      var rourl = wx.getStorageSync('requestUrl') + '/api/robootsay'
      var data = {
        'obj': { 'msg': this.msg }
      }
      requestPost(rourl, data, 'POST').then(function (value) {
        if (value.state === '200') {
          that.msg = ''
          that.xxs.push({'headImg': 'http://qiniuyun.bblog.site/robo2.png', 'content': value.reply, 'obj': '0'})
        } else {
          that.msg = ''
          that.xxs.push({'headImg': 'http://qiniuyun.bblog.site/robo2.png', 'content': '我已經回火星了，过几年我会再回来的，byeeeee', 'obj': '0'})
        }
      }, function (value) {
        console.log(value)
      })
    }
  }
}
</script>

<style>
html, body{
  margin: 0;
  padding: 0;
  background-color: rgba(216, 216, 216, 0.144);
}
.counter-warp{
  width: 100%;
}
.headcls{
  width: 100%;
  height: 100%;
  float: left;
  padding-top:20px;
  /* border: 1px solid red; */
}
.hfcls{
  float: left;
  width: 100%;
  height: 70px;
  /* background-color: aqua; */
  bottom: 0px;
  position:sticky;
}
.fotcls{
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 50px;
  border-top: 1px solid rgba(196, 188, 188, 0.205);
  bottom: 0px;
  position: fixed;

}
.iptcls{
  float: left;
  width: 200px;
  height: 40px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(196, 188, 188, 0.205);
}
.linecls{
  width: 35px;
  height: 35px;
  float: left;
  padding: 10px;
}
.linecls2{
  width: 35px;
  height: 35px;
  float: right;
  padding: 10px;
}


.headimgcls{
  width: 40px;
  height: 40px;
  float: left;
  padding-right: 5px;
  padding-left: 5px;
}

.headimgcls1{
  width: 40px;
  height: 40px;
  float: right;
  padding-left: 5px;
  padding-right: 5px;

}
.divcls{
  margin-top:10px;
  width: 100%;
  float: left;
}

.divcls1{
  margin-top:10px;
  width: 100%;
  float: right;
}

.textarea{
  max-width: 70%;
  word-wrap:break-word;
  border: 0px solid #888;
  background-color: rgb(255, 255, 255);
  overflow: auto;
  display:inline-block !important;
  display:inline;
  padding: 9px;
  border-radius: 2%;
}
.textarea1{
  float: right;
  max-width: 70%;
  word-wrap:break-word;
  border: 0px solid #888;
  background-color: rgb(148, 240, 125);
  overflow: auto;
  display:inline-block !important;
  display:inline;
  padding: 9px;
  border-radius: 2%;
}
.footdiv{
  width: 100%;
  height: 100px;
  float: left;
  border: 0px solid red;
}
</style>
